<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <div>
        <!-- 给按钮绑定点击事件 -->
        <button v-on:click="headClick">提交</button>
        <!-- 给div绑定移动事件 -->
        <div
          style="width: 200px; height: 200px; background: pink"
          v-on:mousemove="headMove"
        ></div>
        <input type="text" v-on:input="headInput" />
      </div>
      <br />

      <div>
        <!-- 绑定点击事件 -->
        <button @click="headClick">提交</button>
        <!-- 给div绑定移动事件 -->
        <div
          style="width: 200px; height: 200px; background: pink"
          @mousemove="headMove"
        ></div>
        <!-- 绑定input事件 -->
        <input type="text" @input="headInput" />
      </div>
      <br />
      <div>
        <!-- 绑定点击事件 -->
        <button @click="headClick">提交</button>
        <!-- 给div绑定移动事件 -->
        <div
          style="width: 200px; height: 200px; background: pink"
          @mousemove="headMove('object',{name:'zhangsan'})"
        ></div>
        <!-- 绑定input事件 -->
        <input
          type="text"
          @input="headInput($event,22,false,{name:'huolinger'})"
        />
      </div>
      <br />
      <div>
        <!-- 绑定点击事件 -->
        <p>{{ num }}</p>
        <button @click="num++">按钮1</button>
        <button @click="updateNum">按钮2</button>
      </div>

      <hr />
      <div>
        <form>
          用户名: <input type="text" /> 
          密码: <input type="password" />
          <button type="submit" @click.prevent="login">登录</button>
        </form>
        <a href="https://ai.taobao.com/" @click="link">淘宝</a>
      </div>

      <br />
      <div>
                              <!-- 绑定抬起事件 -->
        <!-- <input type="text" @keyup="handKeyUp"> -->
                         <!-- 抬起建码(keyCode)是13才能触发事件 （13建码代表的是空格） -->
        <input type="text" @keyup.13="handKeyUp">
                        <!-- 抬起建码(keyCode)是enter才能触发事件 （13建码代表的是空格） -->
        <input type="text" @keyup.enter="handKeyUp">
        <button type="submit" @click="submitClick">注册</button>
      </div>
    </div>
    <script src="./js/vue.js"></script>

    <script>
      const vm = new Vue({
        //非函数定义在data里面
        data: {
          num: 0,
          url: "https://www.baidu.com/",
          text: "百度",
        },
        //配置项: 函数数据定义在methods 里面
        methods: {
          //点击事件的函数
          headClick() {
            console.log("独断万古荒天帝", arguments);
          },
          //移动事件
          headMove() {
            console.log("hello 明天", arguments);
          },

          // input事件
          headInput() {
            console.log("input", arguments);
          },

          //触发点击事件就让num的值加一次，
          updateNum() {
            // console.log(this);
            //vue里面定义的函数 this指向实例化对象
            if (this.num === 0) {
              return;
            }
            this.num--;
          },

          //登录函数
          login(e) {
            //阻止默认事件
            // e.preventDefault();
            console.log("登录成功");
          },
          link(e){
            // e.preventDefault();
          },

          //抬起事件
          handKeyUp(e){
            //抬起事件上默认有 keyCode方法可以检测按下的是哪个键位(13代表的是回车键),
            // 一般按住回车键就会提交用户信息所以要判断用户是否按下的是回车键
            // console.log(e);

            //判断keyCode是不是回车键 如果是就打印enter
            /* if(e.keyCode === 13){
                console.log("enter");
            } */
            
            console.log("enter");
            console.log("提交成功");
          },
          //提交事件
          submitClick(e){
            console.log("注册成功");
          }
        },
      });
      vm.$mount("#app");
    </script>
  </body>
</html>
